<template>
    <div>   
        <div class="header"  ref="wrapper">
            <router-link to="/classify">
                <div class=" first iconfont icon-fanhui-copy-copy"></div>
            </router-link>
            <div class="second iconfont icon-erji"></div>
            <div class="three iconfont icon-fenxiang"></div>
        </div>
        <div>
            <div class="exhibition">
            <img :src="itemIfo.ItemImagePath" alt="">
            </div>
            <div class="box_1">
                <h2>￥{{itemIfo.NowPrice}}<span>.00</span></h2>
                <h3>￥{{itemIfo.OldPrice}}.00</h3>
            </div>
            <div class="box_2">
                <h2>{{itemIfo.VariantName}}</h2>
            </div>
            <div class="box_3">
                <h2>配装说明</h2>
                <h3>快递配送，预计2-5天送达</h3>
            </div>
            <div class="box_4">
                <h2>规格</h2>
                <h3>品牌产地产区规格酒精度净含量香型执</h3>
                <div class="xbox iconfont icon-sangedian-hei"><!--用于放iconfont--></div>
            </div>
        </div>
        <div class="box_5">
            <div><span class="iconfont icon-tuihuobaozhang"></span> 正品保障</div>
            <div><span class="iconfont icon-jiushuiyinliao"></span> 酒便利自营</div>
            <div ><span class="iconfont icon-zhuye"></span> 线下门店</div>
        </div>
        <div class="box_6">
            <span class="iconfont icon-wode"></span>
            <h2>温馨提示</h2>
            <h3>非酒水包装等问题，酒水—旦销售将不予退换。避免光照，通风环境存放。</h3>
            <h4>由于部分商品包装更换较为频繁，请您以收到的商品实物为准，图片仅供参考。</h4>
        </div>
        <div class="box_7"><!--评论区-->
            <div class="top">
                <span>评价</span><span>3696</span>
                <span>好评度99.4%<img src="https://m.9bianli.com/Images/newphoto/fjmd_youjiantou.png"></span>
            </div>
            <div class="middle">
                <img src="https://m.9bianli.com/Images/nofound.png" alt=""><!--这里需要数据渲染图片-->
                <span>匿名</span>
                <span>
                    <img src="https://m.9bianli.com/Images/product/haoping.png" alt=""><!--这里需要数据渲染图片-->
                    <img src="https://m.9bianli.com/Images/product/haoping.png" alt=""><!--这里需要数据渲染图片-->
                    <img src="https://m.9bianli.com/Images/product/haoping.png" alt=""><!--这里需要数据渲染图片-->
                    <img src="https://m.9bianli.com/Images/product/haoping.png" alt=""><!--这里需要数据渲染图片-->
                    <img src="https://m.9bianli.com/Images/product/haoping.png" alt=""><!--这里需要数据渲染图片-->
                </span>
            </div>
            <div class="box_8">
                <div></div>
                <span>准时到达目的地，我以后—直都用酒便力。</span>
            </div>
            <div class="bottom">
                <router-link to="/comments">更多评论</router-link>
            </div>
        </div>
        <hr>
        <img src="https://m.9bianli.com/Images/product/guess_like.png" width="100%">
        <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon @click="enterCart" icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button @click="handleCart(itemIfo)" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import Vue from 'vue'
import {Toast} from 'vant'
    export default {
        data(){
            return{
                itemIfo:{}
            }
        },
        created () {
            this.itemIfo=this.$route.query.item
        },
        methods: {
            handleCart(item) {
                Vue.set(item,'itemNum',1)
                this.$store.commit('cart/addCart',item)
                Toast.success('加购成功')
            },
            enterCart(){
                this.$router.push('/cart')
            }
        },
    }
</script>
<style scoped lang="css" src="../assets/css/detail.css"></style>
<style scoped lang="css" src="../assets/css/reset.css"></style>
<style lang="scss" scoped>
</style>